<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>汽车出借系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    .item {
        width: 20%;
        border: 1px solid #e4ecf3;
        box-shadow: 1px 2px 3px #f2f6f8;
        border-radius: 6px;
        background: #fff;
        padding: 10px;
        min-width: 200px;
        margin: 22px 0 0 2.1%;
        float: left;
        overflow: hidden;
        transition: all .3s;
    }

    .table > thead > tr > th {
        text-align: center;
    }




    .square1 {
        text-align: center;
        font-size: 200%;
        width: 10%;  /* alter */
        border: 3px solid #e4ecf4;
        box-shadow: 4px 5px 6px #f2f6f8;
        border-radius: 10px;

        border-image-repeat: space;
        padding-left: 0px;
        padding-right:0px;
        padding-top:35px;  /* alter */
        padding-bottom:35px;  /* alter */
        min-width: 200px;
        margin: 22px 0 0 2.1%;
        float: left;
        overflow: hidden;
        transition: all .3s;
    }
    a{text-decoration:none;}
</style>
<body>
<div th:include="headbar::customer_headbar" ></div>
<div style="margin-top:70px">
    <a href="#" class="a-wrap" data-toggle="modal" data-target="#payment" onclick="fillData(this)">
        <div class="square1">
            <div class="no-logo">&yen;60</div>
        </div>
    </a>

    <a href="#" class="a-wrap" data-toggle="modal" data-target="#payment" onclick="fillData(this)">
        <div class="square1">
            <div class="no-logo">&yen;128</div>
        </div>
    </a>

    <a href="#" class="a-wrap" data-toggle="modal" data-target="#payment" onclick="fillData(this)">
        <div class="square1">
            <div class="no-logo">&yen;328</div>
        </div>
    </a>

    <a href="#" class="a-wrap" data-toggle="modal" data-target="#payment" onclick="fillData(this)">
        <div class="square1">
            <div class="no-logo">&yen;648</div>
        </div>
    </a>
</div>


<!-- 支付弹窗 -->
<div id="payment" class="modal fade" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">支付界面</h1>
            </div>
            <div class="modal-body">
                <form id="form-pay" > <!--$.ajax-->
                    <div class="form-group has-feedback">
                        <label for="payment-amount">支付金额</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="payment-amount" class="form-control" readonly>
                        </div>
                    </div>

                    <div class="text-right">
                        <button type="submit" class="btn btn-primary"  id="pay-button" >支付</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>


</body>
<script>

//填充支付界面
function fillData(element) {
    var amountText = $(element).find('.no-logo').text();
    var amount = amountText.match(/^¥(\d+)$/); // 使用正则表达式匹配支付金额
    $('#payment-amount').val(amount[1]); // 设置支付金额
}


</script>
<script>
    $(document).ready(function() {
        $('#form-pay').on("submit",function(e) {
            e.preventDefault();
            var amount = $('#payment-amount').val();
            console.log(amount);
            // 执行支付操作
            $.ajax({
                url: '/cars/vipPays',
                type: 'POST',
                data: { amount: amount },
                success: function(response) {
                    alert('成功充值!');
                    window.location.href = response; // 重定向到指定页面 customer_vip;
                },
                error: function(xhr, status, error) {
                    alert("充值失败！");
                }
            });

        });

    });

</script>
</html>